<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>手动设置漂浮点位</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/static/plugin/layui/css/layui.css}" media="all">
    <style type="text/css">

    </style>
</head>
<body>
<!---->
<div style="padding: 8px;">
    <!-- 卡片风格 -->
    <form class="layui-form layui-from-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto;text-align: left;">1、漂浮范围（将起点和终点连接起来作对角线画一个矩形, 点位在这个矩形内变化。经纬度格式：00°00.00000'）</label>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto;">起点纬度：</label>
                <div class="layui-input-block" style="float: left;margin-left: -10px;">
                    <input type="radio" name="wanderStartLatitudeType" lay-filter="wanderStartLatitudeType"
                           value="N" title="北纬">
                    <input type="radio" name="wanderStartLatitudeType" lay-filter="wanderStartLatitudeType"
                           value="S" title="南纬">
                </div>
                <input type="text" id="wanderStartLatitudeDegree" name="wanderStartLatitudeDegree" required lay-verify="required"
                       autocomplete="off" placeholder="" class="layui-input" style="width: 60px;float: left">
                <div style="float:left;line-height: 38px;">&nbsp;度&nbsp;</div>
                <input type="text" id="wanderStartLatitudeMinute" name="wanderStartLatitudeMinute"
                       autocomplete="off" placeholder="" class="layui-input" style="width: 90px;float: left">
                <div style="float:left;line-height: 38px;">&nbsp;分</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto;">起点经度：</label>
                <div class="layui-input-block"  style="float: left;margin-left: -10px;">
                    <input type="radio" name="wanderStartLongitudeType" lay-filter="wanderStartLongitudeType"
                           value="E" title="东经">
                    <input type="radio" name="wanderStartLongitudeType" lay-filter="wanderStartLongitudeType"
                           value="W" title="西经">
                </div>
                <input type="text" id="wanderStartLongitudeDegree" name="wanderStartLongitudeDegree" required lay-verify="required"
                       autocomplete="off" placeholder="" class="layui-input" style="width: 60px;float: left">
                <div style="float:left;line-height: 38px;">&nbsp;度&nbsp;</div>
                <input type="text" id="wanderStartLongitudeMinute" name="wanderStartLongitudeMinute"
                       autocomplete="off" placeholder="" class="layui-input" style="width: 90px;float: left">
                <div style="float:left;line-height: 38px;">&nbsp;分</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto;">终点纬度：</label>
                <div class="layui-input-block" style="float: left;margin-left: -10px;">
                    <input type="radio" name="wanderEndLatitudeType" lay-filter="wanderEndLatitudeType"
                           value="N" title="北纬">
                    <input type="radio" name="wanderEndLatitudeType" lay-filter="wanderEndLatitudeType"
                           value="S" title="南纬">
                </div>
                <input type="text" id="wanderEndLatitudeDegree" name="wanderEndLatitudeDegree" required lay-verify="required"
                       autocomplete="off" placeholder="" class="layui-input" style="width: 60px;float: left">
                <div style="float:left;line-height: 38px;">&nbsp;度&nbsp;</div>
                <input type="text" id="wanderEndLatitudeMinute" name="wanderEndLatitudeMinute"
                       autocomplete="off" placeholder="" class="layui-input" style="width: 90px;float: left">
                <div style="float:left;line-height: 38px;">&nbsp;分</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto;">终点经度：</label>
                <div class="layui-input-block"  style="float: left;margin-left: -10px;">
                    <input type="radio" name="wanderEndLongitudeType" lay-filter="wanderEndLongitudeType"
                           value="E" title="东经">
                    <input type="radio" name="wanderEndLongitudeType" lay-filter="wanderEndLongitudeType"
                           value="W" title="西经">
                </div>
                <input type="text" id="wanderEndLongitudeDegree" name="wanderEndLongitudeDegree" required lay-verify="required"
                       autocomplete="off" placeholder="" class="layui-input" style="width: 60px;float: left">
                <div style="float:left;line-height: 38px;">&nbsp;度&nbsp;</div>
                <input type="text" id="wanderEndLongitudeMinute" name="wanderEndLongitudeMinute"
                       autocomplete="off" placeholder="" class="layui-input" style="width: 90px;float: left">
                <div style="float:left;line-height: 38px;">&nbsp;分</div>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto;">2、速度范围（用中横线隔开，单位:节，例如：0.1-5.9）</label>
            <div class="layui-input-block">
                <input type="text" id="wanderSpeedScope" name="wanderSpeedScope" required
                       lay-verify="required"
                       autocomplete="off" placeholder="" class="layui-input" style="width: auto;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto;">3、速度误差范围（用中横线隔开，单位:节，例如：0.1-3.0）</label>
            <div class="layui-input-block">
                <input type="text" id="wanderSpeedErrorScope" name="wanderSpeedErrorScope" required
                       autocomplete="off" placeholder="" class="layui-input" style="width: auto;">
            </div>
        </div>
    </form>

    <div class="layui-form-item" style="width: 500px; height: 50px; margin: 0 auto;">
        <div class="layui-input-block">
            <button type="button" class="layui-btn  layui-btn-submit " lay-submit=""
                    lay-filter="wanderConfigConfirm">保存并切换模式
            </button>
            <button type="button" class="layui-btn layui-btn-primary" id="wanderConfigBack">取消</button>
        </div>
    </div>
</div>

<input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}">
<input type="hidden" th:value="${currentNavigationId}" id="currentNavigationId">

<script th:src="@{/static/js/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/static/plugin/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/js/app.js}" charset="utf-8"></script>
<script src="/static/js/whysu.js" th:src="@{/static/js/whysu.js}"></script>

<!--序号自增-->
<script type="text/html" id="xuhao">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script>
    layui.use(['jquery', 'table'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        // 当前航程表id
        var currentNavigationId = $('#currentNavigationId').val();

        //页面一打开就执行
        layer.ready(function () {
            $.ajax({
                url: ctx + '/common/selectAllConfigList',
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: requestDTO(),
                beforeSend: function () {
                    this.layerIndex = showLoad();
                },
                complete: function () {
                    closeLoad(this.layerIndex);
                },
                success: function (data) {
                    if (data.result.code == 200) {
                        // 更新值
                        let configList = data.body;
                        // 遍历对象数组，item表示某个具体的对象
                        for (var item = 0; item < configList.length; item++) {
                            //使用for in 遍历对象属性
                            var paramValue = null;
                            var paramKey = null;
                            for (var i in configList[item]) {
                                if (i == 'paramKey') {
                                    paramKey = configList[item][i];
                                } else if (i == 'paramValue') {
                                    paramValue = configList[item][i];
                                }
                            }
                            if (paramKey != null && paramKey != '') {
                                var obj = $('#' + paramKey);
                                if (typeof obj != 'undefined') {
                                    // 有的类型是radio
                                    if (paramKey == 'wanderStartLongitudeType') {
                                        radioChecked('wanderStartLongitudeType', paramValue);
                                    } else if (paramKey == 'wanderStartLatitudeType') {
                                        radioChecked('wanderStartLatitudeType', paramValue);
                                    } else if (paramKey == 'wanderEndLongitudeType') {
                                        radioChecked('wanderEndLongitudeType', paramValue);
                                    } else if (paramKey == 'wanderEndLatitudeType') {
                                        radioChecked('wanderEndLatitudeType', paramValue);
                                    } else if (paramKey == 'wanderStartLongitude') {
                                        // 开始节点经度， 回显成度数+分数
                                        echoDegreeValue(paramValue, "wanderStartLongitudeDegree", "wanderStartLongitudeMinute");
                                    } else if (paramKey == 'wanderStartLatitude') {
                                        // 开始节点纬度， 回显成度数+分数
                                        echoDegreeValue(paramValue, "wanderStartLatitudeDegree", "wanderStartLatitudeMinute");
                                    } else if (paramKey == 'wanderEndLongitude') {
                                        // 结束节点经度， 回显成度数+分数
                                        echoDegreeValue(paramValue, "wanderEndLongitudeDegree", "wanderEndLongitudeMinute");
                                    } else if (paramKey == 'wanderEndLatitude') {
                                        // 结束节点纬度， 回显成度数+分数
                                        echoDegreeValue(paramValue, "wanderEndLatitudeDegree", "wanderEndLatitudeMinute");
                                    } else {
                                        obj.val(paramValue);
                                    }
                                }
                            }
                        }
                        // 需要执行这段代码才会刷新
                        form.render();
                    } else {
                        layer.msg(data.result.message);
                    }
                },
                error: function (result) {
                    layer.msg("请求失败！");
                }
            });
        });

        /**点击保存按钮*/
        form.on('submit(wanderConfigConfirm)', function () {
            var list = paramList();
            if (list == null || list.length == 0) {
                return;
            }
            $.ajax({
                url: ctx + '/common/updateConfigList',
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: requestDTO(list),
                beforeSend: function () {
                    this.layerIndex = showLoad();
                },
                complete: function () {
                    closeLoad(this.layerIndex);
                },
                success: function (data) {
                    if (data.result.code == 200) {
                        // 切换模式
                        switchModeFunction(MODE_WANDER, MODE_STATUS_RUN, currentNavigationId, true, YES_VALUE);
                    } else {
                        layer.msg(data.result.message);
                    }
                },
                error: function (result) {
                    layer.msg("请求失败！");
                }
            });
            return false;
        });

        function paramList() {
            let list = [];
            // 漂浮模式
            list.push(param('wanderStartLongitudeType',  $('input[name="wanderStartLongitudeType"]:checked').val()));
            // 开始节点的的纬度
            list.push(param('wanderStartLatitudeType', $('input[name="wanderStartLatitudeType"]:checked').val()));
            var wanderStartLatitudeDegree = $('#wanderStartLatitudeDegree').val();
            var wanderStartLatitudeMinute = $('#wanderStartLatitudeMinute').val();
            if (!isEmpty(wanderStartLatitudeDegree) || !isEmpty(wanderStartLatitudeMinute)) {
                if (checkLatitudeDegreeFormat(wanderStartLatitudeDegree, wanderStartLatitudeMinute, "漂浮模式起点节点：")) {
                    list.push(param('wanderStartLatitude', getDegreeValue(wanderStartLatitudeDegree, wanderStartLatitudeMinute)));
                } else {
                    return null;
                }
            } else {
                layer.msg("起点纬度需要设置！");
                return null;
            }
            // 开始节点的的经度
            list.push(param('wanderStartLongitudeType',  $('input[name="wanderStartLongitudeType"]:checked').val()));
            var wanderStartLongitudeDegree = $('#wanderStartLongitudeDegree').val();
            var wanderStartLongitudeMinute = $('#wanderStartLongitudeMinute').val();
            if (!isEmpty(wanderStartLongitudeDegree) || !isEmpty(wanderStartLongitudeMinute)) {
                if (checkLongitudeDegreeFormat(wanderStartLongitudeDegree, wanderStartLongitudeMinute, "漂浮模式起点节点：")) {
                    list.push(param('wanderStartLongitude', getDegreeValue(wanderStartLongitudeDegree, wanderStartLongitudeMinute)));
                } else {
                    return null;
                }
            } else {
                layer.msg("起点经度需要设置！");
                return null;
            }
            // 结束节点的的纬度
            list.push(param('wanderEndLatitudeType', $('input[name="wanderEndLatitudeType"]:checked').val()));
            var wanderEndLatitudeDegree = $('#wanderEndLatitudeDegree').val();
            var wanderEndLatitudeMinute = $('#wanderEndLatitudeMinute').val();
            if (!isEmpty(wanderEndLatitudeDegree) || !isEmpty(wanderEndLatitudeMinute)) {
                if (checkLatitudeDegreeFormat(wanderEndLatitudeDegree, wanderEndLatitudeMinute, "漂浮模式终点节点：")) {
                    list.push(param('wanderEndLatitude', getDegreeValue(wanderEndLatitudeDegree, wanderEndLatitudeMinute)));
                } else {
                    return null;
                }
            } else {
                layer.msg("终点纬度需要设置！");
                return null;
            }
            // 结束节点的的经度
            list.push(param('wanderEndLongitudeType', $('input[name="wanderEndLongitudeType"]:checked').val()));
            var wanderEndLongitudeDegree = $('#wanderEndLongitudeDegree').val();
            var wanderEndLongitudeMinute = $('#wanderEndLongitudeMinute').val();
            if (!isEmpty(wanderEndLongitudeDegree) || !isEmpty(wanderEndLongitudeMinute)) {
                if (checkLongitudeDegreeFormat(wanderEndLongitudeDegree, wanderEndLongitudeMinute, "漂浮模式终点节点：")) {
                    list.push(param('wanderEndLongitude', getDegreeValue(wanderEndLongitudeDegree, wanderEndLongitudeMinute)));
                } else {
                    return null;
                }
            } else {
                layer.msg("终点经度需要设置！");
                return null;
            }
            // 范围误差
            list.push(param('wanderSpeedScope', $('#wanderSpeedScope').val()));
            list.push(param('wanderSpeedErrorScope', $('#wanderSpeedErrorScope').val()));
            return list;
        }

        function param(paramKey, paramValue) {
            return {
                'paramKey': paramKey,
                'paramValue': paramValue
            }
        }

        // 取消按钮
        $("#wanderConfigBack").on('click', function () {
            parent.layer.closeAll();
        });

    });
</script>

</body>
</html>